<template>
  <div>
    <el-form class="viewForm" label-width="120px">
      <el-col :span="12">
        <el-form-item label="任务名称">
          <div v-html="viewModel.name"></div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="任务别名">
          <div v-html="viewModel.aliasName"></div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="记录类型">
          <div v-html="viewModel.recordType"></div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="cron表达式">
          <div v-html="viewModel.cronExpression"></div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否异步">
          <div v-html="viewModel.isSync"></div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="任务url">
          <div v-html="viewModel.url"></div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="任务备注">
          <div v-html="viewModel.remark"></div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="任务内容">
          <div v-html="viewModel.content"></div>
        </el-form-item>
      </el-col>
    </el-form>



    <ApiDebugger
        ref="apiDebugger"
        :requestUrl="viewModel.url"
        :requestType="viewModel.requestMethod"
        :contentType="viewModel.contentType"
        :requestHeaders="JSON.parse(viewModel.requestHeader || '{}')"
        :requestBody="viewModel.requestBody"
    />
  </div>
</template>

<script setup>
import ApiDebugger from "@/views/pages/schedulingTask/components/ApiDebugger.vue";

import {useShow} from "@/utils/useShow";

const { viewModel} = useShow("/schedulingTask/view")
</script>

<style scoped>

</style>